<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../../static/js/jquery-2.1.4min.js"></script>
    <script src="../../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="../../static/js/index.js"></script>

    <link type="text/css" rel="stylesheet" href="../../static/index.css?version=1.0">
    <link href="../../static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background: #DCDCDC">

<!-- 固定式头部-->
<nav class="navbar navbar-default navbar-fixed-top top" role="navigation">
    <div class="container-fluid">

        <div class="navbar-header">
            <a class="navbar-brand" href="#" style="font-weight: bold; font-size: 25px">XXX书店</a>
        </div>

        <ul class="nav navbar-default navbar-toggle">
            test
        </ul>

        <form class="navbar-form navbar-left" role="search" id="center">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="搜索" id="search_input">
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-default" id="search">按书名搜索</button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" id="dropdown-menu" id="dropdown-menu">
                    <li><a id="change">按作者搜索</a></li>
                </ul>
            </div>
        </form>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
        </ul>
    </div>
</nav>

<!-- 主要内容-->
<div class="main">

    <div class="left"></div>

    <div class="content">

        <div class="row goods-row">

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

        </div>
<!--     rowrowrowrowrowrowrowrowrow-->
        <div class="row goods-row">

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

        </div>
        <!--     rowrowrowrowrowrowrowrowrow-->
        <div class="row goods-row">

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3" >
                <div class="card">
                    <img src="../../static/img/default.jpg" alt="Avatar" style="width:100%">
                    <div class="caption" style="padding: 3px">
                        <div class="caption_1">
                            <div class="price">¥50</div>
                            <div class="sales">已经有50人购买</div>
                        </div>
                        <div class="caption_2"><p>书名</p></div>
                        <div class="caption_3"><p>作者</p></div>
                        <div class="caption_4"><p>库存127本</p></div>
                    </div>
                </div>
            </div>

        </div>
        <!--     rowrowrowrowrowrowrowrowrow-->

        <div class="page">

            <div class="page_left">
                <ul class="pagination">
                    <li><a href="#">&laquo;</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </div>

            <div class="paeg_right">
                共 100 页, 第
                <input class="page_count"  name="page_count" type="number" min="1">
                页
                <button type="button" class="page_jump" name="page_jump">确定</button>
            </div>

        </div>

    </div>

    <div class="right"></div>

</div>
<!--底部-->
<div class="foot">
    <br>
    <div style="background: #888888;height: 1px;width: 90%; margin-left: 5%"></div>
    <br>
    <footer>
        <p>Luyishi.Copyright &copy;2020</p>
    </footer>
</div>
</body>
</html>